<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>商品规格</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    
    <style type="text/css">
        body {
            font-size: 14px;
            background: #f3f3f3;
        }
        .contain{
            margin-top: 15px;
        }
        .menuRgiht{
            float: right;
            margin-right:20px;
        }
        /*下面弹出的样式*/
        .pickerToTop{
            position: fixed;
            bottom: 0;
            -webkit-transform: translateY(143px);
            height:143px;
            overflow-y:auto; 
            -webkit-transition:  .5s;
            transition:  .5s;
            z-index: 999;
            width: 100%;
            text-align: center;
        }
        .toTopAnimate{
            -webkit-transform: translateY(00px);
        }
        .aui-radio-name{
                margin: 0;
                height: 20px;
                line-height: 20px;
        }
        .aui-radio{
                width: 20px;
                height: 20px;
        }
        .aui-radio{
            margin: 0;
            margin-right: 5px;
        }
        .aui-list-view:after{
            border:none;
        }
        .aui-radio:checked:before, .aui-radio.aui-checked:before{
            left: 1px;
            top: -1px;
        }
        .aui-radio:checked:after, .aui-radio.aui-checked:after{
            content:"";
        }
        .aui-radio:checked, .aui-radio.aui-checked{
            background-color: #327afa;
            border: solid 1px #327afa;
        }
        .tips{
            height: 20px;
            line-height: 20px;
            padding:0 15px;
            margin-bottom: 15px;
        }
        .singleInput{
            height: 21px;
            border: none !important;
            width: 60px  !important;
            margin-bottom: 0  !important;
            padding: 0 !important;
            text-align: right;
            margin-right: 8px;
        }
        .pickerToTop .aui-list-view{
            margin-bottom: 0;
        }
        .singlePrice{
            display: inline-block;
        }
        .myBorder{
            height: 8px;
            background: #193d7d;
        }
        .minCount{
            padding-right:10px;
            margin-right: 10px;
            /*border-right:1px solid #9c9c9c;*/
            position: relative;
        }
        .minCount:before{
            content:"";
            position: absolute;
            width: 1px;
            background: #c8c7cc;
            bottom: -15px;
            top: -15px;
            right: 0;
        }
        .singlePrices{
            display: none;
        }
        .numText em{
            color:#000;
            padding-right:5px;
        }
        .numText:after {
            font-family: "auiicon" !important;
            right: 15px;
            content: '\e6a3';
            color:#bbbbbb;
        }
    </style>
</head>
<body>
<div class="contain">
         <ul class="aui-list-view">
            <li class="aui-list-view-cell" tapmode data-type="offer" onclick="showPicker(this)">
                <a class="aui-arrow-right">
                    报价方式
                    <span class="menuRgiht formatText">按规格报价</span>
                </a>
            </li>
         </ul>
         <ul class="aui-list-view">
            <li class="aui-list-view-cell">
                <a class="">
                    起订量
                    <span class=" numText aui-pull-right"  tapmode  data-type="type" onclick="showPicker(this)"><em class="numTextSpan">条</em></span>
                    <span class="minCount aui-pull-right"><input type="number" placeholder="请输入" class=" singleInput isNumber" name=""></span>
                </a>
            </li>
         </ul>
         <!-- 规格报价模块 -->
         <div class="formatPrice">
             <!-- 价格模块 -->
             <ul class="tips priceTips">
                <li class="" >
                        价格
                        <span class="aui-pull-right allSameSpan" tapmode onclick="setSamePrice()"><input class="aui-radio" type="radio" name="priceRadio"><div class="aui-radio-name">全部相同</div></span>
                </li>
             </ul>
             <ul class="aui-list-view ">
                <li class="aui-list-view-cell">
                        <span>蘑菇白色、10*15cm</span>
                        <span class="aui-pull-right"><em class="price"><input type="number" placeholder="请输入" class="priceInput singleInput isNumberFloat" name=""></em>元</span>
                </li>
                <li class="aui-list-view-cell">
                        <span>蘑菇白色、10*15cm</span>
                        <span class="aui-pull-right"><em class="price"><input type="number" placeholder="请输入" class="priceInput singleInput isNumberFloat" name=""></em>元</span>
                </li>
                <li class="aui-list-view-cell">
                        <span>蘑菇白色、10*15cm</span>
                        <span class="aui-pull-right"><em class="price"><input type="number" placeholder="请输入" class="priceInput singleInput isNumberFloat" name=""></em>元</span>
                </li>
                <li class="aui-list-view-cell">
                        <span>蘑菇白色、10*15cm</span>
                        <span class="aui-pull-right"><em class="price"><input type="number" placeholder="请输入" class="priceInput singleInput isNumberFloat" name=""></em>元</span>
                </li>
                <li class="aui-list-view-cell">
                        <span>蘑菇白色、10*15cm</span>
                        <span class="aui-pull-right"><em class="price"><input type="number" placeholder="请输入" class="priceInput singleInput isNumberFloat" name=""></em>元</span>
                </li>
             </ul>
                        <!-- 数量模块 -->
             <ul class="tips numTips">
                <li class="" >
                        可售数量
                        <span class="aui-pull-right allSameSpan"  tapmode onclick="setSameStock()"><input class="aui-radio" type="radio" name="numRadio"><div class="aui-radio-name">全部相同</div></span>
                </li>
             </ul>
             <ul class="aui-list-view ">
                <li class="aui-list-view-cell">
                        <span>蘑菇白色、10*15cm</span>
                        <span class="aui-pull-right num"><input type="number" placeholder="请输入" class="stockInput singleInput isNumber" name=""></span>
                </li>
                <li class="aui-list-view-cell">
                        <span>蘑菇白色、10*15cm</span>
                        <span class="aui-pull-right num"><input type="number" placeholder="请输入" class="stockInput singleInput isNumber" name=""></span>
                </li>
                <li class="aui-list-view-cell">
                        <span>蘑菇白色、10*15cm</span>
                        <span class="aui-pull-right num"><input type="number" placeholder="请输入" class="stockInput singleInput isNumber" name=""></span>
                </li>
                <li class="aui-list-view-cell">
                        <span>蘑菇白色、10*15cm</span>
                        <span class="aui-pull-right num"><input type="number" placeholder="请输入" class="stockInput singleInput isNumber" name=""></span>
                </li>
                <li class="aui-list-view-cell">
                        <span>蘑菇白色、10*15cm</span>
                        <span class="aui-pull-right num"><input type="number" placeholder="请输入" class="stockInput singleInput isNumber" name=""></span>
                </li>
             </ul>
        </div>
         <!-- 单品报价模块 -->
         <div class="singlePrices">
             <ul class="aui-list-view ">
                <li class="aui-list-view-cell">
                        <span>产品单价</span>
                        <span class="aui-pull-right"><div class="singlePrice"><input type="number" placeholder="请输入" class=" singleInput" name=""></div>元</span>
                </li>
                <li class="aui-list-view-cell">
                        <span>产品库存</span>
                        <span class="aui-pull-right"><em class="singleNum"><input type="number" placeholder="请输入" class="singleNumInpupt singleInput" name=""></em></span>
                </li>
             </ul>
        </div>
     </div> 
     <div class="pickerToTop">
         
         <ul class="aui-list-view setOffer">
             <li class="aui-list-view-cell zfBlue" data-type="format"   tapmode onclick="setType(this)">
                 按规格报价
             </li>
             <li class="aui-list-view-cell"  data-type="single"  tapmode onclick="setType(this)">
                 单品报价
             </li>
             <li class=" myBorder" >
                 
             </li>
             <li class="aui-list-view-cell "  tapmode onclick="hidePicker()">
                 取消
             </li>
         </ul>
         <ul class="aui-list-view setType">
             <li class="aui-list-view-cell  zfBlue" data-type="tiao"   tapmode onclick="setType(this)">条</li>
             <li class="aui-list-view-cell" data-type="jian"   onclick="setType(this)">件</li>
             <li class=" myBorder" >
                 
             </li>
             <li class="aui-list-view-cell " tapmode onclick="hidePicker()" >
                 取消
             </li>
         </ul>
     </div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/myInfo.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script type="text/javascript" src="../../script/echo.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../../script/mui.js"></script>
<script type="text/javascript" src="../../script/index.js"></script>
<script type="text/javascript">
    var firstH;//记录第一次自定义时候的高度，因为弹出键盘时候body高度变化了
    apiready = function () {
        api.parseTapmode();
    }
    
    //为了在下面的热门类别可以通用，单独出来
    function changeCheck(obj){
        if($(obj).hasClass("active")){
          $(obj).removeClass("active");
        }else{
          $(obj).addClass("active");
        }        
    }
    // mui遮罩
    var mask = mui.createMask(hidePicker);
    // 显示遮罩
    function showPicker(obj){
        var type=$(obj).attr("data-type");
        if(type=="offer"){
            $(".setOffer").css({"display":"block"});
            $(".setType").css({"display":"none"});
        }else{
            $(".setOffer").css({"display":"none"});
            $(".setType").css({"display":"block"});
        }
       setFrameHeight(1);
        mask.show();
        $(".pickerToTop").addClass("toTopAnimate");
    }
    // 关闭遮罩
    function hidePicker(){
        $(".pickerToTop").removeClass("toTopAnimate");
        mask.myclose();
       setFrameHeight(0);
    }
    // 弹出时候设置各种方式
    function setType(obj){
        var type=$(obj).attr("data-type");
        var text=$(obj).text();
        switch(type){
            case 'format':
                $(".formatPrice").css({"display":"block"});
                $(".singlePrices").css({"display":"none"});
                $(".formatText").text(text);
             break;
            case 'single':
                $(".formatPrice").css({"display":"none"});
                $(".singlePrices").css({"display":"block"});
                $(".formatText").text(text);
             break;
            case 'tiao':
            case 'jian':
                $(".numTextSpan").text(text);
             break;
        }
        hidePicker();
    }
    //设置当前页面的高度，得以去掉win的确定按钮
    function setFrameHeight(h){
        //设置release_win的页面高度,把页面的确定挤出外面
        // h参数：1为去掉确定按钮，0为显示
        var bodyH;
        if(h){
            // 添加自定义状态，隐藏win的确定
            firstH=$('body').height();
            bodyH=$('body').height()+55;
        }else{
            bodyH=firstH;
        }
        api.setFrameAttr({
            name: 'releasePrice_frm',
            rect: {
                x: 0,
                y: 45,
                w: 'auto',
                h: bodyH
            },
            bounces: true,
            bgColor: '#fff',
            vScrollBarEnabled: true,
            hScrollBarEnabled: true
        });
    }
    //整数的输入框判断
    $(document).on("blur",".isNumber",function(){
        var value=$(this).val();
        if(value!=""){
            if(!isNumber(value)){
                alert("请输入整数");
                $(this).val("");
                $(this).focus();
            }
        }
    })
    //价格的输入框判断
    $(document).on("blur",".isNumberFloat",function(){
        var value=$(this).val();
        if(value!=""){
            if(!isNumberFloat(value)){
                alert("请输入整数");
                $(this).val("");
                $(this).focus();
            }
        }
    })
    // 设置价格相同
    function setSamePrice(){
        var price=$(".formatPrice").find(".priceInput").eq(0).val();
        if(price){
            $(".formatPrice").find(".priceInput").val(price)
        }else{
            alert("请设置第一个价格！");
            $("input[name='priceRadio']").prop("checked",false);

        }
    }
    // 设置库存相同
    function setSameStock(){
        var stock=$(".formatPrice").find(".stockInput").eq(0).val();
        if(stock){
            $(".formatPrice").find(".stockInput").val(stock)
        }else{
            alert("请设置第一个库存！");
            $("input[name='numRadio']").prop("checked",false);

        }
    }
</script>
</html>